<template>
  <div>
    <!-- 模板里不需要写this，模板中可以获取到VC的所有属性 -->
    <h1>当前求和为: {{ sum }}</h1>
    <h3>当前求和放大十倍为: {{ BigSum }}</h3>
    <h3>我在{{ school }}，学习{{ subject }}</h3>
    <h3 style="color:red">Person组件的总人数是：{{ personList.length }}</h3>

    <select v-model="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>

    <!-- 2：Vue中方法如果不传参，默认是传递事件导致Vuex报错 -->
    <!-- 使用Vuex简写方法调用时，一定要传递指定参数过去 -->
    <button @click="JIA(n)">+</button>
    <button @click="JIAN(n)">-</button>
    <button @click="jiaOdd(n)">总数为奇数时再加</button>
    <button @click="jiaWait(n)">延迟添加</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Count",
  data() {
    return {
      n: 1,
    };
  },
  computed: {
    ...mapState(['sum', 'school', 'subject', 'personList']),
    ...mapGetters(['BigSum'])
  },
  methods: {
    ...mapMutations(['JIA', 'JIAN']),
    ...mapActions(['jiaOdd', 'jiaWait'])
  }
};
</script>

<style>
bottom {
  margin-left: 5px;
}
</style>
